<template>
  <a-modal
    :title="title"
    :visible="modalVisible"
    :width="800"
    :centered="centered"
    :bodyStyle="{ padding: '0' }"
    :maskClosable="maskClosable"
    v-bind="$props"
    @ok="onOk"
    @cancel="onCancel">
    <div class="content-box custom-ant">
      <slot></slot>
    </div>
    <template slot="footer">
      <slot name="footer"></slot>
    </template>
  </a-modal>
</template>

<script>
import props from './props.js';

export default {
  name: 'CModal',
  mixins: [ props ],
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    centered: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    };
  },
  computed: {
    modalVisible: {
      set(val) {
        this.$emit('update:visible', val);
      },
      get() {
        return this.visible;
      }
    },
  },
  created() {
  },
  methods: {
    onOk() {
      this.onCancel();
    },
    onCancel() {
      console.log(123);
      
      this.modalVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
.content-box {
}
</style>
<style lang="less">
.ant-modal-footer {
  background-color: rgba(31, 127, 227, 0.08);
}
</style>
